{% extends "base.html" %}
{% load static from staticfiles %}

{% block webhead %}
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ info.title }}</title>
{% endblock %}


<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
  .el-carousel__item h3 {
    color: red;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.tuijian {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

{% block webbody %}

{% if commend_list %}

<el-carousel :interval="4000" type="card" height="250px" style="margin-bottom: 5px">
    <el-carousel-item v-for="(wen,index) in commend_list" :key="index">
        <el-card class="box-card" style="height: 95%; background:url('{% static 'bg/1.jpg' %}')">
            <div style="padding-top: 40%">
                {% verbatim %}
                <a :href = "'/b/details/'+  wen.title ">
                    <h3 style="text-align: center;color: grey">{{ wen.title }}</h3>
                </a>
                {% endverbatim %}
            </div>
        </el-card>
    </el-carousel-item>
</el-carousel>

{% endif %}


{% for blog in blog_list %}
    <el-card class="box-card">
      <div class="text item">
          <a href="{% url "blog:details" blog.title %}" style="font-size: 20px; font-weight: bold;color: #00CC66">{{ blog.title }}</a>
          <br>
          {{ blog.summary|safe }}
      </div>
        <hr>
        <span style="font-size: 12px">
            <i class="el-icon-date"></i> &nbsp; {{ blog.create_at|date:"M d Y" }}
        </span>
        <span style="margin-right: 30px"></span>
        <span style="font-size: 12px">
            <i class="el-icon-edit"></i> &nbsp; {{ blog.author }}
        </span>
        <span style="margin-right: 30px"></span>
        {% ifnotequal blog.views 0 %}
        <span style="font-size: 12px">
            <i class="el-icon-view"></i> &nbsp; {{ blog.views }}
        </span>
        {% endifnotequal %}
        <span style="font-size: 12px; float: right">
            <a href="{% url "blog:details" blog.title %}" style="color: #CCCCFF">阅读更多>></a>
        </span>
    </el-card>
<br>
{% endfor %}

{% if cus_list.previous_page_number > 0 %}
    <a href="?page={{ cus_list.previous_page_number }}">
        <el-button  round>
                <span aria-hidden="true"><i class="el-icon-d-arrow-left"></i></span>
        </el-button>
    </a>
{% endif %}


{#分页#}
{% for pg in cus_list.paginator.page_range %}

    {% if cus_list.number == pg %}
        <a href="?page={{ pg }}"><el-button type="info" round>{{ pg }}</el-button></a>
    {% elif pg < cus_list.number|add:3 and pg > cus_list.number|add:-3 %}
        <a href="?page={{ pg }}"><el-button  round>{{ pg }}</el-button></a>
    {% endif %}

{% endfor %}


{% if cus_list.has_next %}
    <a href="?page={{ cus_list.next_page_number }}">
        <el-button  round>
                <span aria-hidden="true"><i class="el-icon-d-arrow-right"></i></span>
        </el-button>
    </a>
{% endif %}


{% endblock %}


{% block js %}
commend_list: {{ commend_list|safe }},
{% endblock %}




